<template>
  <div>
    <x-header :left-options="{backText: ''}">注册</x-header>
    <p class="L_title">注册账号</p>
    <group>
    <x-input id="uid" title="账号" name="mobile" placeholder="请输入账号" v-model="acc" :min="6" :max="12" ref="refacc">
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/user.png" width="24" height="24">
    </x-input>
    <p class="L_tips">请输入6至12位的账号</p>

    <x-input title="输入密码" type="password" placeholder="请输入密码" v-model="psw" :min="6" :max="12" required ref="refpwd" >
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw.png" width="24" height="24">
    </x-input>
    <p class="L_tips">请输入6至12位的密码</p>
    <x-input title="确认密码" type="password" placeholder="再次输入密码" v-model="psw2" :equal-with="psw" required ref="refpwd2" >
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw2.png" width="24" height="24">
    </x-input>
    <p class="L_tips">确保密码输入正确</p>
    
    <x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email" v-model="email" ref="refemail">
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/email.png" width="24" height="24">
    </x-input>
    <p class="L_tips">用于找回密码</p>

    <x-input title="验证码" placeholder="请输入验证码" v-model="code" :is-type="codeR" ref="refcode">
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/yzm.png" width="24" height="24">
      <span id="yzm" slot="right" @click="createCode(4)">{{ycode}}</span>
    </x-input>
    <p class="L_tips">不区分大小写</p>

    </group>
    <div class="L_butbox">
      <button id="L_bt" class="L_button" @click="adduser()" disabled>完成</button>
    </div>

    <div class="L_foot">
      <router-link class="L_line" :to="'/Login'" replace><span>已有账号？立即注册</span></router-link>
    </div>

  </div>
</template>

<script>
import { AlertModule} from 'vux'
import { setInterval } from 'timers';

export default {
  components: {
  },
  data () {
    var that =this;
    return {
      acc:'',
      code:'',
      ycode:'',
      psw: '',
      psw2: '',
      email:'',
      OK:false,
      codeR: function(value){
          return {
            valid: value.toUpperCase() === that.ycode.toUpperCase(),
            msg: "验证码不正确！"
          }},

          }
  },
  methods:{
    adduser() {//提交
        this.$vux.loading.show({
        text: '注册中'})
        setTimeout(() => {
        this.$vux.loading.hide()
        if(this.acc&&this.psw&&this.email!=''){
            this.$http.post("http://localhost:3000/users/adduser",
            {
            User_id:this.acc,
            User_name:Math.random().toString(36).slice(2,14),
            Psw:this.psw,
            Email:this.email,
            },{emulateJSON: true})
            .then(
            (response)=>{
            console.log(response);
            this.$vux.loading.hide()
            if(response.data.msg.status=='same'){
              var that = this;
              console.log('该账号已被注册！');
              AlertModule.show({
              title: '该账号已被注册!',
              content: '请修改账号',
              onShow () {
              },
              onHide () {
              }
              })
            }
            else if(response.data.msg.status=='ok'){
              var that = this;
              AlertModule.show({
              title: '注册成功!',
              content: '前往登录？',
              onHide () {
              that.$router.replace("/Login");
              }
              })
            }
            },
            (error)=>{
            console.log(error);
            }
            );
            }else {
            this.error();
            }
            }, 1000)
            },

        createCode(n){//参数n表示要指定的位数
        var code='';
        //创建一个数组，用于存放所有候选组成验证码的字符
        var sourceStr=new Array('v','1','2','3','4','5','6','7','8','9','q','w','e','r','t','y','u','i','n','p','a','s','d','f','g');
        for (var i=0; i<n; i++) {
        //产生随机数，用来从字符串数组中选取n位字符作为验证码
        var charIndex=Math.floor(Math.random()*25);
        //n位字符生成验证码字符串
        code+=sourceStr[charIndex];
        }
        this.ycode=code;

        this.r = Math.floor(Math.random()*255);//随机背景颜色
        this.g = Math.floor(Math.random()*255);
        this.b = Math.floor(Math.random()*255);
        this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
        document.getElementById("yzm").style.backgroundColor =this.color;
        },

        keyDown(){//注册验证
        if(this.$refs.refacc.valid == true && this.$refs.refcode.valid == true&& this.$refs.refpwd.valid == true&& this.$refs.refpwd2.valid == true && this.$refs.refemail.valid == true&& this.code != '' && this.psw != ''&& this.psw2 != ''&& this.email != ''&& this.acc != ''){
          this.OK = true;
        }else{
          this.OK = false;
        }
        },
      Btclass(){
        var L_btcolor =document.getElementById("L_bt");
        if(this.OK == true){//按钮可用
          L_btcolor.style.color = "white";
          L_btcolor.style.backgroundColor = "#008CBA";
          L_btcolor.disabled=false;
        }
        else if(this.OK == false){//按钮不可用
          L_btcolor.style.color = "grey";
          L_btcolor.style.backgroundColor = "rgba(211, 211, 211, 0.5)";
          L_btcolor.disabled=true;
    }
      }


  },

  mounted(){
      this.createCode(4);
  },
  updated(){
    this.keyDown();
    this.Btclass();
  }
}
</script>
<style scoped>
#yzm{
    background-color: aquamarine;
    font-size: 31px;
    font-style: italic;
    font-family: Arial;
    letter-spacing: 10px;
    margin: 0;
    color:darkslategrey;
}
.L_line{
text-decoration:none;  /*超链接无下划线*/
}
.L_title{
  font-size: 30px;
  margin-top: 50px;
  margin-left: 30px;
  margin-bottom: 50px;
}
.L_butbox{
  margin-top: 40px;
  text-align: center;
}
.L_button{
  color:grey;
  background-color:rgba(211, 211, 211, 0.5);
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
}
.L_foot{
  margin: 20px;
  text-align: center;
}
.L_tips{
  color: lightgray;
  margin-left: 50px;
  font-size: 14px;
}
</style>